<template>
  <div class="category">
    <van-nav-bar
      title="分类列表"
      left-arrow
      @click-left="onClickLeft"
      class="header"
      fixed
    />
    <notice :top="$remToPx(0.88)" class="not"></notice>
    <van-tree-select
      height="55vw"
      :items="items"
      :main-active-index.sync="activeIndex"
      @click-nav="tabClass"
    >
      <template slot="content">
        <van-overlay :show="show"><van-loading /></van-overlay>
        <div class="select_right_content" v-for="(item, index) in contentList" :key="index" v-show="item.children.length > 0">
          <h4>{{item.cate_name}}</h4>
          <div class="item_box">
            <div class="item" v-for="(it, index) in item.children" :key="index" @click="toProductList(item.id)">
              <van-image :src="it.pic" class="img" />
              <p>{{it.cate_name}}</p>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [],
      activeIndex: 0,
      topClass: [],
      contentList: [],
      show: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.replace('/')
    },
    getTopClass () {
      return new Promise(resolve => {
        this.$axios.get('/api/storeCategory/list').then(res => {
          if (res.status === 200) {
            this.topClass = res.data
            res.data.forEach(item => {
              let obj = {
                text: item.cate_name
              }
              this.items.push(obj)
            })
            resolve(res.data)
          }
        })
      })
    },
    getChildClass (id) {
      this.show = true
      this.$axios.get(`/api/storeCategory/${id}`).then(res => {
        if (res.status === 200) {
          this.contentList = res.data
        }
        this.show = false
      })
    },
    tabClass (index) {
      if (index !== this.activeIndex) {
        this.getChildClass(this.topClass[index].id)
      }
    },
    toProductList (id) {
      this.$router.push({ name: 'allgoods', params: { id: id } })
    }
  },
  created () {
    this.getTopClass().then(res => {
      this.getChildClass(res[0].id)
    })
  }
}
</script>

<style lang="scss">
.category{
  padding-top: 1.36rem;
  height: calc(100%);
  .header{
    height: .88rem;
    line-height: .88rem;
    .van-nav-bar__title{
      color: #333333;
      font-size: .32rem;
      font-weight: bold;
    }
    .van-nav-bar__arrow{
      font-size: .36rem;
      color: #666666;
    }
  }
  .van-tree-select{
    height: 100% !important;
    .van-sidebar{
      width: 1.6rem !important;
      .van-sidebar-item--select{
        background: #f0f0f0;
        color: #ff2a1f;
        font-weight: bold;
      }
    }
    .select_right_content{
      background: #f0f0f0;
      padding: .24rem;
      // height: calc(100% - .48rem);
      h4{
        color: #333333;
        font-size: .28rem;
        font-weight: bold;
        margin-bottom: .24rem;
      }
      .item_box{
        display: flex;
        width: 5.42rem;
        height: 2.56rem;
        border-radius: .16rem;
        background: #ffffff;
        padding: .32rem .32rem 0;
        box-sizing: border-box;
        flex-wrap: wrap;
        .item{
          margin-right: .24rem;
          margin-bottom: .32rem;
          .img{
            width: 1.44rem;
            height: 1.44rem;
          }
          p{
            color: #666666;
            font-size: .24rem;
            text-align: center;
            margin-top: .16rem;
          }
        }
        .item:nth-child(3n){
          margin-right: unset;
        }
      }
    }
    .van-tree-select__content{
      background: #f0f0f0;
      height: 100%;
      position: relative;
      .van-overlay{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba($color: #000000, $alpha: 0);
        .van-loading{
          color: #666666;
        }
        .van-loading__spinner{
          width: 1.5rem;
          height: 1.5rem;
        }
      }
    }
    .van-tree-select__nav{
      flex: unset;
      -webkit-box-flex: unset;
      -webkit-flex: unset;
    }
  }
  .not{
    position: fixed;
    top: .88rem;
    width: 100%;
  }
}
</style>
